<template>
  <div>
    <el-form
      :model="userForm"
      :rules="rules"
      label-position="top"
      ref="userForm"
      class="form"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="userForm.sex">
          <el-radio :label="'男'">男</el-radio>
          <el-radio :label="'女'">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input v-model="userForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="userForm.email"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-switch v-model="userForm.state"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addUser">立即添加</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
      <div class="warn">
        <div>关于添加:</div>
        <div>1.可使用逗号分隔用户名完成批量添加用户</div>
        <div>2.批量添加时的 <span class="bold">手机、邮箱均为空状态</span></div>
        <div>
          3.所有添加的用户
          <span class="bold">初始密码</span> 均为<span class="pwd"> user </span>
          加<span class="pwd"> 用户名</span>
        </div>
        <div>4.批量添加时注意逗号间隔的内容,用户名不能为空</div>
        <div>5.任意用户名为空都会导致添加失败</div>
        <div>6.批量添加时最后一个字符不能为逗号</div>
        <div>7.用户名需为3-8位且不包含空字符</div>
        <div>8.用户名不能为已注册用户名</div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { batchAddUser, addUser } from "@network/manager";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      userForm: {
        username: "",
        sex: "男",
        phone: "",
        email: "",
        state: true,
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        phone: [
          {
            pattern:
              /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
            max: 11,
            min: 11,
          },
        ],
        email: [
          {
            pattern:
              /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
            message: "请输入正确的邮箱",
            trigger: "blur",
          },
        ],
      },
      users: null,
    };
  },
  computed: {
    isBatchAdd() {
      let users = this.userForm.username.trim().split(",");
      if (users.length > 1) {
        console.log(
          users,
          "users",
          users.every((v) => v.trim().length >= 3 && v.trim().length <= 8)
        );
        if (users.every((v) => v.trim().length >= 3 && v.trim().length <= 8)) {
          this.users = users;
          return true;
        } else {
          return false;
        }
      } else {
        return users[0].length;
      }
    },
    userIsValid() {
      return (
        this.userForm.username.trim().split(",").length == 1 &&
        this.userForm.username.trim().length != 0
      );
    },
  },
  methods: {
    ...mapMutations(["setNotice"]),
    resetForm() {
      this.userForm.username = "";
      this.userForm.sex = "男";
      this.userForm.phone = "";
      this.userForm.email = "";
      this.userForm.state = true;
    },
    addUser() {
      if (!this.isBatchAdd && this.userIsValid) {
        console.log(this.userForm.username.trim().length, "!");
        addUser(this.userForm).then((res) => {
          if (res.data.tag) {
            this.$message.success(`添加${this.userForm.username}成功`);
          } else {
            this.$message.error(`添加${this.userForm.username}失败`);
          }
        });
        console.log(this.userForm);
      } else if (this.isBatchAdd) {
        batchAddUser({ users: this.users }).then((res) => {
          if (res.data.tag) {
            this.$message.success("批量添加成功");
          } else if (res.data.msg) {
            this.$message.error(res.data.msg);
          } else {
            this.$message.error("批量添加用户失败");
          }
        });
        console.log("添加", this.userForm, "data", this.users);
      } else {
        this.$message.error("用户名不合规范");
      }
    },
  },
  activated() {
    this.setNotice("添加用户");
  },
};
</script>

<style scoped>
.form {
  background-color: whitesmoke;
  padding: 0 30px;
  height: 88vh;
  overflow: auto;
  box-sizing: border-box;
}

.warn {
  font-size: 14px;
  color: red;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pwd {
  font-weight: bold;
  color: green;
}

.bold {
  font-weight: bold;
}

.warn > :first-child {
  font-size: 15px;
  font-weight: bolder;
}
.warn :not(:first-child)::first-letter {
  color: black;
}

/deep/ .el-form-item__label {
  padding: 0;
}

/deep/ .el-form-item {
  margin-bottom: 15px;
}
</style>
